<!DOCTYPE html> 
<html manifest="main.manifest">
  <head> 
    <title>Accelerometer</title> 

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
    <meta name="apple-touch-fullscreen" content="yes" /> 
    <meta name="apple-mobile-web-app-capable" content="yes" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> 

    <!-- link rel="stylesheet" type="text/css" href="style.css" media="screen" /-->
    <link rel="apple-touch-icon" href="gyroscope.png" /> 
    <script src="app.js"></script> 
  </head> 
 
  <body> 
    This tests both the accelerometer and gyroscope of.
    <div id="bad-news">&nbsp;</div>
    <div id="no"> 
      Your browser does not support Device Orientation and Motion API. Try this sample with iPhone, iPod or iPad with iOS 4.2+.    
    </div> 
    <h2>Device Motion Events</h2>

    acceleration
    <br/>
    X: <span id="x">&nbsp;</span>
    <br/>
    Y: <span id="y">&nbsp;</span>
    <br/>
    Z: <span id="z">&nbsp;</span>
    <br/>

    rotationRate  
    <br/>
    alpha:<br/>
    <span id="r-alpha">&nbsp;</span>
    <br/>

    beta:<br/>
    <span id="r-beta">&nbsp;</span>
    <br/>

    gamma:<br/>
    <span id="r-gamma">&nbsp;</span>
    <br/>

    <br/>
    interval: <span id="interval">&nbsp;</span>
    <br/>

    <h2>Device Orientation Event</h2>

    alpha (z-axis) (0, 360):<br/>
    <span id="alpha">&nbsp;</span>

    <br/>

    beta (x-axis) (-180, 180):<br/>
    <span id="beta">&nbsp;</span>

    <br/>

    gamma (y-axis) (-90, 90):<br/>
    <span id="gamma">&nbsp;</span>
  </body> 
</html> 
